import React from "react";
import styled from "styled-components";
import TorrentListItem from "./TorrentListItem";

const MasonryGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 24px;
`;

const TorrentList = ({ torrents = [], categories, token }) => {
  return (
    <MasonryGrid>
      {torrents.map((torrent) => (
        <TorrentListItem
          key={torrent.infoHash}
          torrent={torrent}
          categories={categories}
          token={token}
          mode="masonry"
        />
      ))}
    </MasonryGrid>
  );
};

export default TorrentList;